<template>
	<div class="grafting">
		<div class="tableBox" style="height:320px;">
			<div class="title">定时清扫</div>
			<el-table :data="clearData" max-height="300px">
				<el-table-column type="index" width="80">
					<template slot-scope="scope">
						<div @click="createRow" v-if="scope.$index == clearData.length -1"><img src="@/assets/img/add.png"></div>
						<div @click="delRow(scope.$index, scope.row)" v-else><img src="@/assets/img/plus.png"></div>
					</template>
				</el-table-column> 
				<el-table-column prop="id" label="序号" align="center" width="80" show-overflow-tooltip></el-table-column>
				<el-table-column prop="time" label="开始时间" align="center" min-width="200" show-overflow-tooltip>
					<template slot-scope="scope">
						<div class="rework">
							<el-time-select 
								v-model="scope.row.startTime"
								:picker-options="{
									start: '08:30',
									step: '00:15',
									end: '18:30'
								}"
								placeholder="选择时间">
							</el-time-select>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="errorName" label="结束时间" align="center" min-width="200">
					<template slot-scope="scope">
						<div class="rework"><el-time-select 
								v-model="scope.row.endTime"
								:picker-options="{
									start: '08:30',
									step: '00:15',
									end: '18:30'
								}"
								placeholder="选择时间">
							</el-time-select></div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="tableBox" style="margin-top:30px;height:480px;">
			<div class="title">外因</div>
			<el-table :data="tableData" max-height="380px">
				<el-table-column type="index" width="80">
					<template slot-scope="scope">
						<div @click="createRow" v-if="scope.$index == tableData.length -1"><img src="@/assets/img/add.png"></div>
						<div @click="delRow(scope.$index, scope.row)" v-else><img src="@/assets/img/plus.png"></div>
					</template>
				</el-table-column>
				<el-table-column type="index" label="序号" align="center" width="80" show-overflow-tooltip></el-table-column>
				<el-table-column prop="errorName" label="故障原因" align="center" width="200" show-overflow-tooltip>
					<template slot-scope="scope">
						<div class="rework"><el-input v-model="scope.row.errorName" placeholder="请输入"></el-input></div>
					</template>
				</el-table-column>
				<el-table-column prop="time" label="回数" align="center" min-width="200">
					<template slot-scope="scope">
						<div class="rework"><el-input v-model="scope.row.time" placeholder="请输入"></el-input></div>
					</template>
				</el-table-column>
				<el-table-column prop="timelength" label="时间(分钟)" align="center" min-width="200">
					<template slot-scope="scope">
						<div class="rework"><el-input v-model="scope.row.timelength" placeholder="请输入"></el-input></div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div style="float:right;margin-top:50px;"><el-button type="primary">确认</el-button></div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			searchContent:'',
			value1:'',
			value:'',
			form: {
				name: '',
			},
			options: [{
				value: '选项1',
				label: '黄金糕'
			}, {
				value: '选项2',
				label: '双皮奶'
			}, {
				value: '选项3',
				label: '蚵仔煎'
			}, {
				value: '选项4',
				label: '龙须面'
			}, {
				value: '选项5',
				label: '北京烤鸭'
			}],
			clearData:[
				{
					id: '1',
					startTime: '',
					endTime: '',
				},
				{
					id: '2',
					startTime: '',
					endTime: '',
				},
			],
			tableData: [
				{
					id: '1',
					time: '',
					timelength: '',
					errorName: '',
					logName: '',
					remarks: ''
				},
				{
					id: '1',
					time: '',
					timelength: '',
					errorName: '',
					logName: '',
					remarks: ''
				},
				{
					id: '1',
					time: '',
					timelength: '',
					errorName: '',
					logName: '',
					remarks: ''
				},
				{
					id: '1',
					time: '',
					timelength: '',
					errorName: '',
					logName: '',
					remarks: ''
				},
				{
					id: '1',
					time: '',
					timelength: '',
					errorName: '',
					logName: '',
					remarks: ''
				}
			],
		};
	},
	methods: {
		onSubmit() {
			console.log('submit!');
		},
		createRow(){
			var list = {
					id: '1',
					time: '',
					timelength: '',
					errorName: '',
					logName: '',
					remarks: ''
				};
				this.tableData.push(list); 
		},
		delRow(val, row){
			this.tableData.splice(val, 1);
		},
	}
};
</script>
<style lang="scss" scoped>
	.grafting {
		.title{
			font-weight:600;
		}
	}
</style>
<style scoped>
.tableBox {
	border-radius: 10px;
	background:#fff;
	padding: 30px;
	height:730px;
}
.remantRework >>> .el-form-item{
	border-bottom:solid 1px #eeeeee;
	padding-bottom:30px;
	padding-top:20px;
}
.remantRework >>> .el-form-item__label{
	font-size:30px;
	color:#000;
}
.remantRework >>> .el-form-item__content{
	font-size:30px;
	color:#666666;
}
.remantRework >>> .el-input > input{
	background:#fff;
	font-size:30px;
}
.orderSheet >>> .el-dialog__title{
	font-size:22px;
	color:#666666;
}
.orderSheet >>> .el-dialog__headerbtn{
	font-size:26px;
	color:#888888;
}
.cardBrandy{
	margin-top:20px;
}
.box-col{
	margin-top:20px;
}
.box-card{
	border-radius:10px;
}
.box-card .title{
	font-size:26px;
	text-align:center;
	height:80px;
	display: table-cell;
	vertical-align: middle;
}
.rework >>> .el-input > input{
	background:#fff;
}
.tableBox >>> .el-table th.el-table__cell > .cell{
	text-align:center;
}
.rework >>> .el-icon-time{display:none;}
</style>
